<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义滚动条加鼠标滚轮事件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .box {
            width: 600px;
            height: 550px;
            margin: 30px auto;
            overflow: hidden;
            border: 2px solid #999999;
            box-shadow: 1px 1px 16px #333;
        }
        
        .img {
            height: 540px;
            position: relative;
            overflow: hidden;
        }
        
        .img ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 1850px;
        }
        
        .img ul li {
            float: left;
        }
        
        .img ul li+li {
            margin-left: 25px;
        }
        
        .img ul img {
            width: 350px;
            height: 540px;
            vertical-align: top;
        }
        
        .bar {
            height: 10px;
            background-color: #ccc;
            /* border-radius: 5px; */
            position: relative;
        }
        
        .scroll {
            height: 10px;
            width: 100px;
            border-radius: 5px;
            background-color: gold;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="img">
            <ul>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
            </ul>
        </div>
        <div class="bar">
            <div class="scroll"></div>
        </div>
    </div>
</body>
<script>
    var wrapDiv = document.getElementsByClassName('box')[0];
    var oBox = document.getElementsByClassName('img')[0];
    var oBar = document.getElementsByClassName('bar')[0];
    var moveContent = document.getElementsByTagName('ul')[0];
    var oScroll = document.getElementsByClassName('scroll')[0];
    var t = 0,
        l = 0;
    var barEffectiveRangeW = 0,
        barEffectiveRangeH = 0,
        contEffectiveRangeW = 0,
        contEffectiveRangeH = 0;
    customSliderBar(oScroll, oBar, 'x', moveContent, oBox);
    /*
     * obj --- 要滚动的滑块
     * parentDom --- 滑块的父元素
     * direction --- 滑动的方向， x : 横向滚动  y : 垂直滚动
     * moveObj --- 和滚动条联动的内容部分
     * moveObjParentDom --- 包含联动内容的父元素
     **/
    function customSliderBar(obj, parentDom, direction, moveObj, moveObjParentDom) {
        barEffectiveRangeW = parentDom.offsetWidth - obj.offsetWidth;
        barEffectiveRangeH = parentDom.offsetHeight - obj.offsetHeight;
        contEffectiveRangeW = moveObj.offsetWidth - moveObjParentDom.offsetWidth;
        contEffectiveRangeH = moveObj.offsetHeight - moveObjParentDom.offsetHeight;
        obj.onmousedown = function(e) {
            var e = e || window.event;
            var vScrolling = false; // 是否垂直滚动
            if (direction === 'x') {
                obj.x = e.clientX - obj.offsetLeft;
            } else {
                vScrolling = true;
                obj.y = e.clientY - obj.offsetHeight;
            }
            document.onmousemove = function(e) {
                var e = e || window.event;
                var scale = 0;
                if (vScrolling) {
                    t = e.clientY - obj.y;
                    moveTopFn(t, obj, moveObj);
                } else {
                    l = e.clientX - obj.x;
                    moveLeftFn(l, obj, moveObj);
                }
            }
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
                obj.releaseCapture && obj.releaseCapture();
            }
            obj.setCapture && obj.setCapture();
            return false;
        }
    }

    function moveLeftFn(num, obj, moveObj) {
        if (num <= 0) num = 0;
        if (num > barEffectiveRangeW) num = barEffectiveRangeW;
        obj.style.left = num + 'px';
        scale = num / (barEffectiveRangeW);
        moveObj.style.left = -scale * contEffectiveRangeW + 'px';
    }

    function moveTopFn(num, obj, moveObj) {
        if (num <= 0) num = 0;
        if (num > barEffectiveRangeH) num = barEffectiveRangeH;
        obj.style.top = num + 'px';
        scale = num / (barEffectiveRangeH);
        moveObj.style.left = -scale * contEffectiveRangeH + 'px';
    }

    mouseWheelFn(wrapDiv);

    function mouseWheelFn(obj) {
        if (document.addEventListener) {
            obj.addEventListener('mousewheel', function(e) {
                Detail(e);
                e.preventDefault();
                e.stopPropagation();
            });
            obj.addEventListener('DOMMouseScroll', function(e) {
                Detail(e);
                e.preventDefault();
                e.stopPropagation();
            })
        } else {
            obj.body.attachEvent('onmousewheel', function() {
                Detail(e);
                e.cancelBubble();
                e.returnValue = false;
            });
        }
    }

    function Detail(e) {
        var e = e || window.event;
        var down = true;
        (-e.wheelDelta || e.detail) < 0 ? down = false : down = true;
        if (down) {
            l += 22;
            if (l > barEffectiveRangeW) l = barEffectiveRangeW;
            moveLeftFn(l, oScroll, moveContent);
        } else {
            l -= 22;
            if (l <= 0) l = 0;
            moveLeftFn(l, oScroll, moveContent);
        }
    }
</script>

</html>